<template>
    <el-container style="padding: 20px; max-width: 400px; margin: auto;">
        <el-form :model="form" :rules="rules" ref="formRef" label-width="0">
            <el-form-item prop="searchQuery">
                <el-input v-model="form.searchQuery" placeholder="请输入3位数字" clearable @keyup.enter="handleSearch"
                    prefix-icon="el-icon-search" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="handleSearch" style="margin-top: 10px;">
                    搜索
                </el-button>
            </el-form-item>
        </el-form>
    </el-container>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
// FormInstance 是 Element Plus 组件库中 el-form 组件实例的类型，
// 用于对表单进行操作和校验。通常我们可以在组件中通过 ref 获取表单实例，
// 然后对其进行操作。它提供了一些常用的表单组件，
// 如输入框、下拉框、多选框、单选框等，并且支持表单校验、表单数据处理、数据绑定等功能。
import type { FormInstance } from 'element-plus'
import { ElMessage } from 'element-plus'

interface FormState {
    searchQuery: string
}

const form = ref<FormState>({
    searchQuery: ''
})

const formRef = ref<FormInstance>()

// 校验规则：必须是10位数字
const rules = {
    searchQuery: [
        {
            required: true,
            message: '请输入搜索内容',
            trigger: ['blur', 'change']
        },
        {
            pattern: /^\d{3}$/,
            message: '请输入3位数字',
            trigger: ['blur', 'change']
        }
    ]
}

const handleSearch = () => {
    formRef.value?.validate((valid) => {
        if (valid) {
            // alert(`搜索内容：${form.value.searchQuery}`)
            // 这里可以调用接口或者处理搜索逻辑
            ElMessage.info("搜索内容:" + form.value.searchQuery)
        } else {
            console.log('校验失败')
            return false
        }
    })
}
</script>

<style scoped>
.el-input {
    width: 100%;
}
</style>
